<template>
  <button
    :disabled="disabled ? true : false"
    class="n-button"
    :class="[ntype?'n-button-'+ntype:'n-button-default',disabled?'n-button-disabled':'',round?'n-button-round':'']"
    @click="buttonClick"
  >
    <i v-if="icon" class="iconfont" :class="icon?icon:''"></i>
    <slot v-if="$slots.default"></slot>
    <span v-else>默认内容</span>
  </button>
</template>
<script>
export default {
  name: 'NButton',
  props: {
    ntype: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    buttonClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.n-button {
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  color: white;
}
.n-button-default {
  color: #606266;
}
.n-button-primary {
  background-color: #409eff;
}
.n-button-success {
  background-color: #85ce61;
}
.n-button-info {
  background-color: #a6a9ad;
}
.n-button-warning {
  background-color: #ebb563;
}
.n-button-danger {
  background-color: #f56c6c;
}
.n-button-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.n-button-round {
  border-radius: 25px;
}
</style>
